Grokking JavaScript Fundamentals
Rate this course
Ask Author
Contribute
Back to course home

0% completed

Vote For New Content
Introduction
Who should take this course?
Course Overview
Introduction to JavaScript
JavaScript Basics
JavaScript - Hello World
JavaScript - Comments
Quiz
JavaScript Variables and Operators
JavaScript - Variables
JavaScript - Operators
Quiz
JavaScript Conditionals
Introduction to Conditional Statements in JavaScript
JavaScript - If...Else
JavaScript - Switch Case
Quiz
JavaScript Objects
Introduction to Objects in JavaScript
JavaScript - Number
JavaScript - Boolean
JavaScript - Math
JavaScript - Date
Quiz
JavaScript - Functions
Introductions to Function in JavaScript
JavaScript - Variable Scope
JavaScript - Default Parameters
JavaScript - Arrow Functions
Quiz
JavaScript - String and Arrays
Introduction to Strings in JavaScript
JavaScript - String Methods
Introduction to Array in JavaScript
JavaScript - Array Methods
Quiz
Introduction to loops in JavaScript
JavaScript - for loop
JavaScript - while loop
JavaScript - do-while loop
JavaScript - for-in loop
JavaScript - for-of loop
JavaScript - Loop Control
Quiz
JavaScript - Maps
JavaScript - Sets
Quiz
Where to Go from Here
Introduction to Array in JavaScript

Arrays in JavaScript are used to store multiple values in a single variable, providing an efficient way to group and manage data. They are particularly useful for storing lists of items, such as numbers, strings, or objects, where each item can be accessed and manipulated using an index.

Why to Use Arrays?

Arrays provide a way to store multiple items in a single variable, making it easier to collect, access, and manipulate data.

Example: Comparing Variables to an Array

Imagine we want to store a list of fruit names.

Without an array:

let fruit1 = "apple";
let fruit2 = "banana";
let fruit3 = "cherry";
  • fruit1, fruit2, and fruit3 are individual variables each storing a single fruit name.

With an array:

let fruits = ["apple", "banana", "cherry"];
  • fruits is an array storing three fruit names.
  • Using an array allows us to group these items under a single name, fruits, making the data easier to handle.

Creating an Array

An array can be created by listing values within square brackets [].

Image

Example: Creating an Array with Three Colors

Javascript
. . . .
  • colors is an array that stores strings: "red", "green", and "blue".
  • Each item in the array is separated by a comma.
  • This method of creating an array is known as an array literal.

Accessing Array Elements

Elements in an array are accessed using their index, a number representing their position in the array, starting from 0.

Example: Accessing the First Color

Javascript
. . . .
  • colors[0] accesses the first element in the colors array, which is "red".
  • The variable firstColor is then assigned the value of the first element of the array.
  • Indexes in JavaScript arrays start at 0, not 1.

Changing an Array Element

You can modify any element in an array by accessing it through its index and assigning a new value.

Example: Changing the Last Color to "Purple"

Javascript
. . . .
  • colors[2] accesses the third element (at index 2) in the colors array, which originally contained "blue".
  • Assigning "purple" to this position changes the third element of the array to "purple".
  • The array now holds "red", "green", and "purple" as its elements.

Looping Array Elements

Looping through an array allows you to access each element without directly referencing its index.

Example: Printing Each Color Using forEach

Javascript
. . . .
  • The forEach method is used to iterate over each element in the colors array.
  • For each iteration, the color parameter represents the current element being processed in the array.
  • The function inside forEach is executed once for each array element, printing each color to the console.

Adding Array Elements

Adding elements to an array can be done in various ways, including using methods like push for adding elements to the end of an array or unshift for adding to the beginning.

Example: Adding Elements to an Array

Here's how you can add elements to the end and the beginning of an array.

Javascript
. . . .
  • numbers.push(4) adds the number 4 to the end of the numbers array.
  • numbers.unshift(0) adds the number 0 to the beginning of the array.
  • The final array reflects the additions, showing [0, 1, 2, 3, 4].

JavaScript new Array()

The new Array() constructor creates a new array. You can specify either the length of the array or the elements themselves.

Example: Creating an Array with new Array()

Javascript
. . . .
  • new Array(5) creates an array of length 5. The elements are not defined and thus are undefined.
  • new Array('a', 'b', 'c') creates an array with the elements 'a', 'b', and 'c'.

When to Use Arrays Instead of Objects

Arrays are best used when the order of elements matters, or when you need to store a list of items where each item is accessed by its numerical index.

Objects, on the other hand, are ideal for collections of items that are accessed by keys and where the order is not important.

Example: Choosing Between an Array and an Object

Consider you're storing a list of fruits in order.

let fruits = ["Apple", "Banana", "Cherry"]; // Array

If you need to store additional details about each fruit, an object might be more suitable.

let fruitDetails = {
  apple: { color: "red", taste: "sweet" },
  banana: { color: "yellow", taste: "sweet" },
  cherry: { color: "red", taste: "tart" }
}; // Object
  • An array, fruits, is used to maintain a simple ordered list of fruit names.
  • An object, fruitDetails, associates each fruit with its properties, like color and taste, which is more structured and descriptive compared to an array.
JavaScript - String Methods
JavaScript - Array Methods
Mark as Completed

On this page

Why to Use Arrays?

Example: Comparing Variables to an Array

Creating an Array

Example: Creating an Array with Three Colors

Accessing Array Elements

Example: Accessing the First Color

Changing an Array Element

Example: Changing the Last Color to "Purple"

Looping Array Elements

Example: Printing Each Color Using forEach

Adding Array Elements

Example: Adding Elements to an Array

JavaScript new Array()

Example: Creating an Array with new Array()

When to Use Arrays Instead of Objects

Example: Choosing Between an Array and an Object